
function computeFont(text = '慌', { fontSize = 16, fontFamily, fontWeight = 500, height = 0 }) {
  const imgData = getFontImgData(text, { fontSize, fontFamily, fontWeight, height })
  console.log(imgData)
  const length = getFirstIndex(imgData)
  console.log(length, length / fontSize)
}

function getFontImgData(text = '慌', { fontSize, fontFamily, fontWeight, height }) {
  const canvas = document.createElement('canvas')
  canvas.width = fontSize * 2
  canvas.height = fontSize * 2
  const halfFont = fontSize / 2
  const ctx = canvas.getContext('2d')
  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  const x = canvas.width / 2
  const y = Math.ceil((fontSize * 2 - height) / 2)
  console.log(x, y, '111111111111')
  ctx.fillText(text, halfFont, y, canvas.width)
  const imageData = ctx.getImageData(halfFont, y, fontSize, height)
  canvas.style.position = 'absolute'
  canvas.style.bottom = '10px'
  canvas.style.zIndex = 999999
  document.body.appendChild(canvas)
  const canvasT = document.createElement('canvas')
  canvasT.width = fontSize
  canvasT.height = height
  const ctxT = canvasT.getContext('2d')
  ctxT.putImageData(imageData, 0, 0)
  canvasT.style.position = 'absolute'
  canvasT.style.bottom = '200px'
  canvasT.style.zIndex = 999999
  document.body.appendChild(canvasT)
  console.log(window.getComputedStyle(canvas).width, window.getComputedStyle(canvas).lineHeight, window.getComputedStyle(canvasT).lineHeight, 'window.getComputedStyle(canvas).lineHeight)')
  return imageData.data
}

function getFirstIndex(pixels) {
  for (let i = 3, n = pixels.length; i < n; i += 4) {
    if (pixels[i] > 0) return (i - 3) / 4
  }
  return pixels.length
}

export default computeFont
